<template lang="pug">
.hestorucheck
  el-row 
    .centered-text 关联条件：
    el-radio-group(v-model="radioModel",:disabled="disabled",@change="handleQueryData") 
      el-radio(label="1") 业务编号
      el-radio(label="2") 身份证号
      el-radio(label="3") 病人姓名
      el-radio(label="4") 病人编号
  mt-table(
    v-bind="tableProps"
)
  
</template>
<script setup lang="ts">
import { type TableProps } from "@scmt/common-components";
import { useRequest } from "@scmt/common-hooks";
import { useApi } from "@scmt/core-api";
import {
  type RegistrationEntity,
  type RegistrationQueryParams,
  adviceColumns,
  ERegistrationColumnKey,
  registrationStateColorMap,
  RegistrationStateEnum,
} from "@scmt/api-pacs-registration";

const editingObj = ref<null | RegistrationEntity>(null);
const radioModel = ref("1");
const disabled = ref(false);
const $api = useApi();
const queryPramas = reactive<RegistrationQueryParams>({
  pageNum: 1,
  pageSize: 20,
  registrationState: RegistrationStateEnum.Reviewed + "," + RegistrationStateEnum.Printed,
});
const { request, data, loadingMap } = useRequest({
  tableData: (q: any) => {
    let item = { outpatientNumber: "", idCard: "", name: "", patientId: "" };
    if (radioModel.value) {
      switch (radioModel.value) {
        case "1":
          item.outpatientNumber = editingObj?.value?.outpatientNumber ?? "outpatientNumber";
          break;
        case "2":
          item.idCard = editingObj?.value?.idCard ?? "idCard";
          break;
        case "3":
          item.name = editingObj?.value?.name ?? "name";
          break;
        case "4":
          item.patientId = editingObj?.value?.patientId ?? "patientId";
          break;
        default:
          break;
      }
    }
    const params = Object.assign(queryPramas, item, q);
    return $api.pacs.registration.queryAll(params);
  },
  //患者类型字典
  patientType: () => $api.dict.item.listAsOptions("patient-type"),
});

const tableProps = computed(() => {
  const { tableData } = toRefs(data);
  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: tableData.value ?? [],
    columns: [
      {
        type: "index",
        label: "序号",
        width: "60px",
      },
      adviceColumns[ERegistrationColumnKey.RegistrationStateLable],
      adviceColumns[ERegistrationColumnKey.PatientType],
      adviceColumns[ERegistrationColumnKey.InspectionNumber],
      adviceColumns[ERegistrationColumnKey.AdmissionNumber],
      adviceColumns[ERegistrationColumnKey.Name],
      adviceColumns[ERegistrationColumnKey.IdCard],
      adviceColumns[ERegistrationColumnKey.PatientNumber],
      adviceColumns[ERegistrationColumnKey.DeviceName],
      adviceColumns[ERegistrationColumnKey.ProjectName],
      adviceColumns[ERegistrationColumnKey.ApplyOfficeName],
      adviceColumns[ERegistrationColumnKey.RegistrationTime],
    ],
    //@ts-ignore
    cellStyle: ({ row, column }) => {
      if (column.property === adviceColumns[ERegistrationColumnKey.RegistrationStateLable].prop) {
        return {
          //@ts-ignore
          backgroundColor: `${registrationStateColorMap[row[column.property]] || ""} !important`,
        }
      }
    },
  };
  return tableProps;
});
onMounted(() => {
  request("patientType");
});

//查询
const handleQuery = (q: any) => {
  editingObj.value = $api.pacs.registration.$$createEntity(q);
  if (editingObj.value.id) {
    return request("tableData");
  } else {
    const { tableData } = toRefs(data);
    tableData.value = [];
  }
};
const handleQueryData = () => {
  return request("tableData");
};

defineExpose({
  handleQuery,
});

//监听登记单选择改变
watch(
  () => editingObj.value,
  (item) => {
    if (item && item.id) {
      disabled.value = false;
    } else {
      disabled.value = true;
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.hestorucheck {
  overflow-y: auto;
  height: 100%;

  .el-row {
    padding: 5px;

    .centered-text {
      display: flex;
      align-items: center;
      justify-content: center;
      /* 如果你也想水平居中 */
      height: 32px;
      /* 设置div的高度 */
    }
  }

  .mt-table {
    height: calc(100% - 42px);

    :deep(.mt-table__content) {
      height: 100%;
    }
  }
}
</style>
